<template>
  <div class="voteSingle">
    <!-- 单项 -->
    <div class="li_content" v-for="(item, index) in vote" :key="index" @click="showVote(item)">
      <!-- 投票选项 -->
      <li class="li_content_li1">
        <div class="li_content_li1_headimg">
          <img :src="item.user.avatar" />
        </div>
        <div class="li_content_li1_div2">
          <li class="vote_name">发起人:{{ item.user.username }}</li>
          <li class="vote_date">开始时间：{{ formatDateTime4(item.startTime) }}</li>
        </div>
        <van-tag v-if="item.voteIndex != null" class="vote_tag" mark type="success">已投票</van-tag>
        <van-tag v-else class="vote_tag" mark type="primary">未投票</van-tag>
      </li>
      <!-- 存投票标题 -->
      <li class="li_content_li2 overflowSingle">{{ item.title }}</li>
      <!-- 查看是否投票 -->
      <li class="li_content_li3">
        <div
          style="color: #09a3d6"
          @click="isVoteShow"
          v-if="!!item.endTime"
        >结束时间：{{ formatDateTime4(item.endTime) }}</div>
        {{ isEndDate(item.endTime) }}
      </li>
    </div>
    <van-pagination
      v-if="vote.length > 0"
      v-model="currentPage"
      :total-items="total"
      :show-page-size="pageSize"
      :page-count="pageCount"
      force-ellipses
      @change="handelChange"
    />
  </div>
</template>

<script>
export default {
  // 接受父组件传递的数据
  props: {
    vote: {
      type: Array, // 渲染的列表值
    },
    currentPage: {
      type: Number, // 当前现实页码数
    },
    total: {
      type: Number, // 总数
    },
    pageSize: {
      type: Number, // 每页显示数据
    },
    pageCount: {
      type: Number, // 共有几页
    },
  },
  watch: {
    currentPage: function (currentPage) {
      this.currentPages = currentPage
      console.log(this.currentPage)
    },
  },

  data() {
    return {
      currentPages: 1,
    }
  },

  methods: {
    formatDateTime4(str) {
      var date = new Date(str) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      const D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const H =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const MIN =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      return Y + M + D + H + MIN
    },
    //判断投票结束时间是否超过本地时间
    isEndDate(end) {
      if (Date.parse(new Date()) >= Number(end)) {
        return '投票时间结束，查看详情'
      } else {
        return '正在投票，查看详情'
      }
    },
    //判断去的路由
    isVoteShow() {
      var NowDate = Date.parse(new Date())
    },
    // 跳转到详情页面
    showVote(item) {
      this.$router.push({
        name: 'voteShow',
        query: {
          item: JSON.stringify(item),
        },
      })
    },
    // 分页处理
    handelChange(val) {
      // console.log(val);
      this.currentPages = val
      // console.log(this.currentPages);
      this.$emit('getVotes', this.currentPages)
    },
    // 搜索
    onSearch() {
      this.$emit('search', this.currentPage)
    },
  },

  components: {},
}
</script>

<style scoped>
.li_content {
  background-color: #ffffff;
  margin-bottom: 10px;
}
.li_content_li1_headimg {
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.li_content_li1_headimg > img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.li_content_li1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 10px 0 10px;
  margin: 10px;
}
.li_content_li1_div2 {
  margin-left: 10px;
}
.vote_name {
  font-size: 0.45em;
  color: #304d80;
}
.vote_date {
  font-size: 16px;
  color: #445588;
}

/* 存投票标题 */
.li_content_li2 {
  margin-left: 20px;
  padding-right: 20px;
  width: 100%;
  font-size: 0.5rem;
}
.li_content_li3 {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  font-size: 0.4em;
  color: #09a3d6;
  padding-bottom: 10px;
}
.vote_tag {
  display: inline-block;
  position: absolute;
  right: 0.2rem;
  font-size: 14px !important;
  line-height: 36px;
}
</style>
